<template>
    <div class="default-main">
        <div class="ba-table-box">
            <el-alert class="ba-table-alert" v-if="baTable.table.remark" title="重要提示" :description="baTable.table.remark" type="warning" show-icon />


            <!-- 表格顶部菜单 -->
            <TableHeader
                :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
                :quick-search-placeholder="t('Quick search placeholder', { fields: '标题' })"
            >
            </TableHeader>

            <!-- 表格 -->
            <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
            <Table ref="tableRef"   @selection-change="handleSelectionChange">
                <template #titleRow>
                    <el-table-column prop="title" align="center" label="任务标题"  sortable="custom">
                        <template #default="scope">
                            {{scope.row.title}}<el-tag type="danger" v-if="scope.row.run_status == false">执行异常</el-tag>
                        </template>
                    </el-table-column>
                </template>
            </Table>


        </div>
        <!-- 编辑和新增表单 -->
        <Details />
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import Details from './components/detailsDialog.vue'; // 相对于 index.vue 的路径
import { baTableApi } from '/@/api/common'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import {run} from "/@/api/backend/routine/scheduledTask";
import {defaultOptButtons} from "/@/components/table/index";
import PopupForm from './popupForm.vue'

defineOptions({
    name: 'routine/scheduledTask',
})

const { t } = useI18n()
const tableRef = ref()

const runTask = async (id: number) => {
    try {
        await run(id)
        baTable.getIndex()
    } catch (error) {
        console.error('获取详情失败:', error)
    } finally {
        baTable.form.loading = false
    }
}
/**
 * 多选触发
 * @param val
 */
const multipleSelection = ref([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
let newButton = [
    {
        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        render: 'tipButton',
        name: 'run',
        title: '手动执行',
        type: 'info',
        icon: 'fa fa-play-circle-o',
        class: 'table-row-run',
        // tipButton 禁用 tip
        disabledTip: false,
        // 自定义点击事件
        click: (row: TableRow, field: TableColumn) => {
            console.log(row)
            runTask(row.id)
        }
    },
    // {
    //     // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
    //     render: 'tipButton',
    //     name: 'info',
    //     title: '详情',
    //     type: 'primary',
    //     icon: 'fa fa-search-plus',
    //     class: 'table-row-info',
    //     // tipButton 禁用 tip
    //     disabledTip: false,
    //     // 自定义点击事件
    //     click: (row: TableRow, field: TableColumn) => {
    //         baTable.form.operate = 'Details'
    //         baTable.form.operateIds = row.id
    //     },
    //     // 自定义el-button属性
    //     attr: {}
    // }
]
let optBtn: any[] = defaultOptButtons();
optBtn = newButton.concat(optBtn)

const baTable = new baTableClass(new baTableApi('/admin/routine.scheduledTask/'), {
    column: [
        { label: t('Id'), prop: 'id', align: 'center', operator: false, show: false, operatorPlaceholder: t('Id'), width: 70 },
        {
            label: '任务标题',
            prop: 'title',
            align: 'center',
            operator: 'LIKE',
            render: 'slot',
            slotName: 'titleRow',
            comSearchRender: 'slot' ,
            comSearchSlotName: 'titleRow',
            operatorPlaceholder: t('Fuzzy query'),
        },
        {
            label: '执行周期',
            prop: 'cron_text',
            align: 'center',
            operator: 'LIKE',
            operator: false,
            operatorPlaceholder: t('Fuzzy query'),
        },
        {
            label: '上次执行时间',
            prop: 'lately_run_time',
            align: 'center',
            render: 'datetime',
            operator: 'RANGE',
            width: 160,
            sortable: 'custom',
        },
        {
            label: '下一次执行时间',
            prop: 'next_run_time',
            align: 'center',
            render: 'datetime',
            operator: 'RANGE',
            width: 160,
            sortable: 'custom',
        },
        {
            label: '状态',
            prop: 'status',
            align: 'center',
            render: 'tag',
            render: 'switch'
        },
        {
            label: t('Operate'),
            align: 'center',
            width: '100',
            render: 'buttons',
            buttons: optBtn,
            operator: false,
        },
    ],
    defaultOrder: { prop: 'id', order: 'desc' },
})
provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
    })
})
</script>
